<template>
  <a-button
    type="text"
    class="refresh-btn"
    title="切换主题"
    @click="toggleTheme"
  >
    <template #icon>
      <y-icon v-if="isDark" class="fa-solid fa-moon"></y-icon>
      <y-icon v-else class="fa-solid fa-cloud-sun"></y-icon>
    </template>
  </a-button>
</template>
<script setup>
import { useThemeStore } from '@/stores/modules/theme';
const themeStore = useThemeStore();
const isDark = computed(() => {
  return themeStore.layoutSetting.themeMode === 'realDark';
});
const toggleTheme = () => {
  if (isDark.value) {
    themeStore.layoutSetting.themeMode = 'light';
  } else {
    themeStore.layoutSetting.themeMode = 'realDark';
  }
};
</script>
